<template>
  <div class="app-container">

    <el-form>
      <el-form-item>
        <el-button type="success" @click="dialogFormVisible = true">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="gameTypeList"
      stripe
      border
      style="width: 100%">
      <el-table-column prop="typeId" label="id" width="180" align="center">
      </el-table-column>
      <el-table-column prop="typeName" label="名称" align="center">
      </el-table-column>
      <el-table-column prop="searchType" label="是否检索" width="180" align="center">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.searchType" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                     :inactive-value="0"></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="enable" label="是否启用" width="180" align="center">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.enable" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                     :inactive-value="0"></el-switch>
        </template>
      </el-table-column>

      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="getGameTypeInfoId(scope.row.typeId)">修改</el-button>
          <el-button type="text" size="small" @click="deleteGameTypeById(scope.row.typeId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增 -->
    <el-dialog title="游戏类型" :visible.sync="dialogFormVisible">
      <el-form :model="gameType">
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="gameType.typeName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否检索" :label-width="formLabelWidth">
          <el-switch v-model="gameType.searchType" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                     :inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item label="是否启用" :label-width="formLabelWidth">
          <el-switch v-model="gameType.enable" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                     :inactive-value="0"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false, addGameType()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改 -->
    <el-dialog title="游戏类型" :visible.sync="updateFormVisible">
      <el-form :model="gameTypeUpdate">
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="gameTypeUpdate.typeName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否检索" :label-width="formLabelWidth">
          <el-switch v-model="gameTypeUpdate.searchType" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                     :inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item label="是否启用" :label-width="formLabelWidth">
          <el-switch v-model="gameTypeUpdate.enable" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                     :inactive-value="0"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateFormVisible = false, updateGameType()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import gametype from "@/api/game/type";

export default {
  name: "category",

  data() {
    return {
      dialogFormVisible: false,
      updateFormVisible:false,
      formLabelWidth: '150',
      gameType: {},
      gameTypeUpdate: {},  //修改
      gameTypeList: [], //游戏类型列表
    }
  },

  activated() {
    this.getGameType()
  },

  methods: {

    getGameType() {
      gametype.getGameTypeInfo()
        .then(result => {
          this.gameTypeList = result.data
        })
    },

    //新增游戏类型
    addGameType() {
      gametype.addGameType(this.gameType)
        .then(result => {
          this.gameType = {}
          this.getGameType()
        })
    },

    //删除游戏类型
    deleteGameTypeById(val) {
      this.$confirm(
        `确定对[id = ${val}]操作?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(result => {
        gametype.deleteGameType(val)
        .then(result => {
          this.getGameType()
        })
      })
    },

    getGameTypeInfoId(val) {
      gametype.getGameTypeInfoById(val)
      .then(result => {
        this.gameTypeUpdate = result.data
        this.updateFormVisible = true
      })
    },

    //修改游戏类型
    updateGameType() {
      gametype.updateGameType(this.gameTypeUpdate)
      .then(result => {
        this.getGameType()
        this.gameTypeUpdate = {}
      })
    }
  }
}
</script>

<style scoped>

</style>
